<template>
  <view class="classify">
    <view class="classify_item" v-for="(item,index) in classifyList" :key="index" @click="goList(item)">
      <image :src="item.src" mode="aspectFit" class="img"></image>
      <text class="text">{{item.name}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        classifyList: [{
          src: 'https://mtds.oss-cn-hangzhou.aliyuncs.com/taoke_rabbit/classify/choose.png',
          name: '大额券',
          path: '/pages/index/carouselitemtb?materialIds={"综合":9660,"食品":9649,"美妆":9653,"母婴":9650,"女装":9658,"家居家装":9655,"数码家电":9656,"运动户外":9651,"内衣":9652,"男装":9654,"鞋包配饰":9648}&&title=大额券&&templateType=0',
        }, {
          src: 'https://mtds.oss-cn-hangzhou.aliyuncs.com/taoke_rabbit/classify/brand.png',
          name: '品牌券',
          path: '/pages/index/carouselitemtb?materialIds={"综合":3786,"食品":3791,"美妆":3794,"母婴":3789,"女装":3788,"家居家装":3792,"数码家电":3793,"运动户外":3795,"内衣":3787,"男装":3790,"鞋包配饰":3796}&&title=品牌券&&templateType=0',
        }, {
          src: 'https://mtds.oss-cn-hangzhou.aliyuncs.com/taoke_rabbit/classify/hotTop.gif',
          name: '疯抢排行',
          path: '/pages/index/realtime',
        }, {
          src: 'https://mtds.oss-cn-hangzhou.aliyuncs.com/taoke_rabbit/classify/rank.png',
          name: '高额积分',
          path: '/pages/index/carouselitemtb?materialIds={"综合":13366,"食品":13375,"美妆":13371,"母婴":13374,"女装":13367,"家居家装":13368,"数码家电":13369,"运动户外":13376,"内衣":13373,"男装":13372,"鞋包配饰":13370}&&title=高额反还积分&&templateType=0',
        }, {
          src: 'https://mtds.oss-cn-hangzhou.aliyuncs.com/taoke_rabbit/classify/dong.png',
          name: '母婴馆',
          path: '/pages/index/carouselitemtb?materialIds={"备孕":4040,"0至6个月":4041,"4至6岁":4044,"7至12个月":4042,"1至3岁":4043,"7至12岁":4045}&&title=母婴主题&&templateType=0',
        }]
      }
    },
    computed: {
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    onLoad() {},
    methods: {
      goList(item) {
        // #ifndef H5 || APP-PLUS
        getApp().mtj.trackEvent('classify', { // 埋点统计
          item_name: item.name || '无标题',
          user_id: this.userInfo.id || 0,
        });
        // #endif
        if (item.path) {
          uni.navigateTo({
            url: item.path
          });
        } else {
          uni.showToast({
            icon: 'none',
            title: `${item.name}紧急开发中,敬请期待......`
          });
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .classify {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    .classify_item {
      width: 120upx;
      text-align: center;
      display: inline-block;
      .img {
        // border-radius: 50%;
        width: 80upx;
        height: 80upx;
        background-color: transparent;
      }
      .text {
        display: block;
        font-size: 30upx;
        font-weight: 600;
        width: 120upx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>
